<template>
  <div class="vertical-dashboard">
    <!-- 顶部标题 -->
    <div class="dashboard-title">
      <h1>区域销售数据分析平台</h1>
      <div class="controls">
        <select v-model="selectedRegion" @change="handleRegionChange">
          <option value="all">全国</option>
          <option value="east">华东地区</option>
          <option value="south">华南地区</option>
          <option value="north">华北地区</option>
          <option value="west">西部地区</option>
        </select>
        <button @click="refreshData"> <i class="refresh-icon">↺</i> 刷新 </button>
      </div>
    </div>

    <!-- 顶部KPI指标区 -->
    <div class="kpi-section">
      <div class="kpi-card">
        <div class="kpi-title">总销售额</div>
        <div class="kpi-value">¥{{ regionTotalSales.toLocaleString() }}</div>
        <div class="kpi-trend" :class="regionSalesTrend > 0 ? 'up' : 'down'">
          {{ regionSalesTrend > 0 ? '↑' : '↓' }} {{ Math.abs(regionSalesTrend) }}% 较上月
        </div>
      </div>

      <div class="kpi-card">
        <div class="kpi-title">订单数量</div>
        <div class="kpi-value">{{ regionTotalOrders.toLocaleString() }}</div>
        <div class="kpi-trend" :class="regionOrderTrend > 0 ? 'up' : 'down'">
          {{ regionOrderTrend > 0 ? '↑' : '↓' }} {{ Math.abs(regionOrderTrend) }}% 较上月
        </div>
      </div>

      <div class="kpi-card">
        <div class="kpi-title">客户数量</div>
        <div class="kpi-value">{{ regionTotalCustomers.toLocaleString() }}</div>
        <div class="kpi-trend" :class="regionCustomerTrend > 0 ? 'up' : 'down'">
          {{ regionCustomerTrend > 0 ? '↑' : '↓' }} {{ Math.abs(regionCustomerTrend) }}% 较上月
        </div>
      </div>

      <div class="kpi-card">
        <div class="kpi-title">转化率</div>
        <div class="kpi-value">{{ regionConversionRate }}%</div>
        <div class="kpi-trend" :class="regionConversionTrend > 0 ? 'up' : 'down'">
          {{ regionConversionTrend > 0 ? '↑' : '↓' }} {{ Math.abs(regionConversionTrend) }}% 较上月
        </div>
      </div>

      <div class="kpi-card">
        <div class="kpi-title">客单价</div>
        <div class="kpi-value">¥{{ regionAvgOrderValue.toLocaleString() }}</div>
        <div class="kpi-trend" :class="regionPriceTrend > 0 ? 'up' : 'down'">
          {{ regionPriceTrend > 0 ? '↑' : '↓' }} {{ Math.abs(regionPriceTrend) }}% 较上月
        </div>
      </div>
    </div>

    <!-- 中间地图区域 -->
    <div class="map-section">
      <div class="section-header">
        <h2>区域销售分布地图</h2>
        <div class="map-legend">
          <div class="legend-item">
            <span class="legend-color" style="background-color: #5470c6"></span>
            <span>0-500万</span>
          </div>
          <div class="legend-item">
            <span class="legend-color" style="background-color: #36cbcb"></span>
            <span>500-1000万</span>
          </div>
          <div class="legend-item">
            <span class="legend-color" style="background-color: #fac858"></span>
            <span>1000-2000万</span>
          </div>
          <div class="legend-item">
            <span class="legend-color" style="background-color: #ee6666"></span>
            <span>2000万以上</span>
          </div>
        </div>
      </div>
      <div ref="regionMap" class="region-map"></div>
    </div>

    <!-- 底部图表区域 -->
    <div class="charts-section">
      <div class="chart-container">
        <div class="chart-header">
          <h3>销售趋势分析</h3>
          <div class="chart-filter">
            <button :class="timeRange === 'month' ? 'active' : ''" @click="timeRange = 'month'"
              >月度</button
            >
            <button :class="timeRange === 'quarter' ? 'active' : ''" @click="timeRange = 'quarter'"
              >季度</button
            >
            <button :class="timeRange === 'year' ? 'active' : ''" @click="timeRange = 'year'"
              >年度</button
            >
          </div>
        </div>
        <div ref="salesTrendChart" class="chart-content"></div>
      </div>

      <div class="chart-container">
        <div class="chart-header">
          <h3>产品类别销售占比</h3>
        </div>
        <div ref="productCategoryChart" class="chart-content"></div>
      </div>

      <div class="chart-container">
        <div class="chart-header">
          <h3>Top 5 销售城市</h3>
        </div>
        <div ref="topCitiesChart" class="chart-content"></div>
      </div>

      <div class="chart-container">
        <div class="chart-header">
          <h3>销售渠道分布</h3>
        </div>
        <div ref="salesChannelChart" class="chart-content"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  import chinaGeo from '@/assets/map/map.json' // 引入中国地图JSON

  // 数据状态
  const selectedRegion = ref('all')
  const timeRange = ref('month')
  const regionTotalSales = ref(128560000)
  const regionTotalOrders = ref(45680)
  const regionTotalCustomers = ref(189500)
  const regionConversionRate = ref(23.8)
  const regionAvgOrderValue = ref(2815)

  // 趋势数据
  const regionSalesTrend = ref(12.5)
  const regionOrderTrend = ref(8.3)
  const regionCustomerTrend = ref(15.7)
  const regionConversionTrend = ref(-2.1)
  const regionPriceTrend = ref(3.2)

  // 图表引用
  const regionMap = ref(null)
  const salesTrendChart = ref(null)
  const productCategoryChart = ref(null)
  const topCitiesChart = ref(null)
  const salesChannelChart = ref(null)

  // 初始化图表
  onMounted(() => {
    echarts.registerMap('china', chinaGeo)
    initRegionMap()
    initSalesTrendChart()
    initProductCategoryChart()
    initTopCitiesChart()
    initSalesChannelChart()
  })

  // 监听时间范围变化重新绘制图表
  watch(timeRange, () => {
    initSalesTrendChart()
  })

  // 处理区域选择变化
  const handleRegionChange = () => {
    // 模拟区域数据变化
    const regionData = {
      all: { sales: 128560000, orders: 45680, customers: 189500 },
      east: { sales: 56820000, orders: 19850, customers: 78500 },
      south: { sales: 38560000, orders: 13680, customers: 56800 },
      north: { sales: 21420000, orders: 7620, customers: 31500 },
      west: { sales: 11760000, orders: 4530, customers: 22700 }
    }

    regionTotalSales.value = regionData[selectedRegion.value].sales
    regionTotalOrders.value = regionData[selectedRegion.value].orders
    regionTotalCustomers.value = regionData[selectedRegion.value].customers

    // 重新绘制地图
    initRegionMap()
  }

  // 刷新数据
  const refreshData = () => {
    // 模拟数据刷新
    const now = new Date().toLocaleString()
    // 随机微调数据
    regionTotalSales.value = Math.floor(
      regionTotalSales.value * (1 + (Math.random() * 0.02 - 0.01))
    )
    regionTotalOrders.value = Math.floor(
      regionTotalOrders.value * (1 + (Math.random() * 0.02 - 0.01))
    )

    // 重新绘制所有图表
    initRegionMap()
    initSalesTrendChart()
    initProductCategoryChart()
    initTopCitiesChart()
    initSalesChannelChart()
  }

  // 初始化区域地图
  const initRegionMap = () => {
    const chart = echarts.init(regionMap.value)
    chart.setOption({
      tooltip: { formatter: '{b}<br/>销售额: {c}万元<br/>同比: {d}%' },
      visualMap: {
        type: 'piecewise',
        pieces: [
          { max: 500, label: '0-500万', color: '#5470c6' },
          { min: 500, max: 1000, label: '500-1000万', color: '#36cbcb' },
          { min: 1000, max: 2000, label: '1000-2000万', color: '#fac858' },
          { min: 2000, label: '2000万以上', color: '#ee6666' }
        ],
        textStyle: { color: '#fff' },
        left: 20,
        bottom: 20
      },
      series: [
        {
          name: '销售额',
          type: 'map',
          map: 'china',
          roam: true,
          label: { show: true, color: '#fff', fontSize: 12 },
          data: [
            { name: '北京', value: 1250 },
            { name: '上海', value: 1820 },
            { name: '江苏', value: 2560 },
            { name: '浙江', value: 2180 },
            { name: '广东', value: 3680 },
            { name: '山东', value: 1850 },
            { name: '四川', value: 1560 },
            { name: '湖北', value: 950 },
            { name: '河南', value: 820 },
            { name: '河北', value: 750 }
          ]
        }
      ]
    })
  }

  // 初始化销售趋势图表
  const initSalesTrendChart = () => {
    const chart = echarts.init(salesTrendChart.value)

    // 根据时间范围设置不同的数据
    let xAxisData, seriesData

    if (timeRange.value === 'month') {
      xAxisData = ['1日', '5日', '10日', '15日', '20日', '25日', '30日']
      seriesData = [1250, 1380, 1420, 1650, 1580, 1720, 1850]
    } else if (timeRange.value === 'quarter') {
      xAxisData = ['Q1', 'Q2', 'Q3', 'Q4']
      seriesData = [3850, 4260, 4890, 5280]
    } else {
      xAxisData = [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ]
      seriesData = [3200, 3500, 3800, 4200, 4500, 5100, 5600, 6200, 6800, 7200, 7800, 8500]
    }

    chart.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['销售额', '目标值'], textStyle: { color: '#fff' } },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xAxisData,
        axisLine: { lineStyle: { color: '#4c5464' } }
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#4c5464' } },
        splitLine: { lineStyle: { color: 'rgba(76, 84, 100, 0.3)' } },
        axisLabel: { formatter: '{value} 万' }
      },
      series: [
        {
          name: '销售额',
          type: 'line',
          data: seriesData,
          lineStyle: { color: '#36cbcb' },
          symbol: 'circle',
          symbolSize: 6,
          itemStyle: { color: '#36cbcb' },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(54, 203, 203, 0.3)' },
              { offset: 1, color: 'rgba(54, 203, 203, 0)' }
            ])
          }
        },
        {
          name: '目标值',
          type: 'line',
          data:
            timeRange.value === 'month'
              ? [1200, 1300, 1400, 1500, 1600, 1700, 1800]
              : timeRange.value === 'quarter'
                ? [3500, 4000, 4500, 5000]
                : [3000, 3300, 3600, 4000, 4300, 4800, 5200, 5800, 6300, 6800, 7300, 8000],
          lineStyle: {
            color: '#94a3b8',
            type: 'dashed'
          },
          symbol: 'none',
          itemStyle: { color: '#94a3b8' }
        }
      ]
    })
  }

  // 初始化产品类别图表
  const initProductCategoryChart = () => {
    const chart = echarts.init(productCategoryChart.value)
    chart.setOption({
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 10, textStyle: { color: '#fff' } },
      series: [
        {
          name: '产品类别',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#1e293b',
            borderWidth: 2
          },
          label: { show: false, position: 'center' },
          emphasis: {
            label: { show: true, fontSize: 16, fontWeight: 'bold', color: '#fff' }
          },
          labelLine: { show: false },
          data: [
            { value: 35, name: '智能设备' },
            { value: 25, name: '家居用品' },
            { value: 18, name: '数码配件' },
            { value: 12, name: '软件服务' },
            { value: 10, name: '其他产品' }
          ],
          color: ['#5470c6', '#36cbcb', '#fac858', '#ee6666', '#73c0de']
        }
      ]
    })
  }

  // 初始化城市排名图表
  const initTopCitiesChart = () => {
    const chart = echarts.init(topCitiesChart.value)
    chart.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#4c5464' } },
        axisLabel: { formatter: '{value} 万' }
      },
      yAxis: {
        type: 'category',
        data: ['深圳', '广州', '上海', '北京', '杭州'],
        axisLine: { lineStyle: { color: '#4c5464' } },
        inverse: true
      },
      series: [
        {
          name: '销售额',
          type: 'bar',
          data: [3680, 3250, 3280, 2850, 2180],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#ee6666' },
              { offset: 1, color: '#fac858' }
            ])
          },
          label: { show: true, position: 'right', color: '#fff' }
        }
      ]
    })
  }

  // 初始化销售渠道图表
  const initSalesChannelChart = () => {
    const chart = echarts.init(salesChannelChart.value)
    chart.setOption({
      tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        data: ['线上商城', '移动端APP', '第三方平台', '实体店', '分销商'],
        axisLine: { lineStyle: { color: '#4c5464' } }
      },
      yAxis: {
        type: 'value',
        axisLine: { lineStyle: { color: '#4c5464' } },
        axisLabel: { formatter: '{value} %' }
      },
      series: [
        {
          name: '占比',
          type: 'bar',
          data: [35, 28, 18, 12, 7],
          itemStyle: { color: '#5470c6' },
          label: { show: true, position: 'top', color: '#fff' }
        }
      ]
    })
  }

  // 窗口大小变化时重绘图表
  window.addEventListener('resize', () => {
    echarts.getInstanceByDom(regionMap.value)?.resize()
    echarts.getInstanceByDom(salesTrendChart.value)?.resize()
    echarts.getInstanceByDom(productCategoryChart.value)?.resize()
    echarts.getInstanceByDom(topCitiesChart.value)?.resize()
    echarts.getInstanceByDom(salesChannelChart.value)?.resize()
  })
</script>

<style scoped>
  .vertical-dashboard {
    width: 100%;
    height: 100%;
    background-color: #0f172a;
    color: #fff;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  /* 顶部标题样式 */
  .dashboard-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: #1e293b;
    border-radius: 8px;
  }

  .dashboard-title h1 {
    margin: 0;
    font-size: 1.4rem;
    color: #36cbcb;
  }

  .controls {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  select {
    background-color: #334155;
    color: #fff;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
  }

  /* KPI指标区样式 */
  .kpi-section {
    display: flex;
    gap: 1rem;
    height: 20%;
  }

  .kpi-card {
    flex: 1;
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }

  .kpi-title {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
  }

  .kpi-value {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
    color: #fff;
    flex: 1;
    display: flex;
    align-items: center;
  }

  .kpi-trend {
    font-size: 0.9rem;
    font-weight: 500;
  }

  .up {
    color: #91cc75;
  }
  .down {
    color: #ee6666;
  }

  /* 地图区域样式 */
  .map-section {
    flex: 1;
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .section-header h2 {
    margin: 0;
    font-size: 1.2rem;
    color: #e2e8f0;
  }

  .map-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
  }

  .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #94a3b8;
  }

  .legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
  }

  .region-map {
    width: 100%;
    height: calc(100% - 40px);
  }

  /* 底部图表区域样式 */
  .charts-section {
    display: flex;
    gap: 1rem;
    height: 35%;
  }

  .chart-container {
    flex: 1;
    background-color: #1e293b;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
  }

  .chart-header h3 {
    margin: 0;
    font-size: 1rem;
    color: #e2e8f0;
  }

  .chart-filter {
    display: flex;
    gap: 0.5rem;
  }

  .chart-filter button {
    background-color: #334155;
    color: #fff;
    border: none;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
  }

  .chart-filter button.active {
    background-color: #36cbcb;
    color: #0f172a;
    font-weight: bold;
  }

  .chart-content {
    width: 100%;
    height: calc(100% - 30px);
  }
</style>
